<template>
  <div class="tab-bar-container">
    <van-tabbar v-model="active" @change="onChange" safe-area-inset-bottom>
      <van-tabbar-item>
        <!-- <img src="@/assets/img/tab1.png" alt="" class="tab-icon"> -->
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" class="tab-icon" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
      <template #icon="props">
          <img :src="props.active ? icon1.active : icon1.inactive" class="tab-icon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'TabBar',
  data() {
    return {
      active: 0, // 默认选中'我的',
      icon: {
        active: require('@/assets/img/tab11.png'),
        inactive: require('@/assets/img/tab1.png')
      },
       icon1: {
        active: require('@/assets/img/tab22.png'),
        inactive: require('@/assets/img/tab2.png')
      }
    }
  },
  mounted() {
    this.initActiveTab()
  },
  methods: {
    // 初始化时根据当前路由设置激活的选项卡
    initActiveTab() {
      const currentPath = this.$route.path
      if (currentPath.includes('my')) {
        this.active = 1
      }
    },

    // 选项卡改变时触发的事件
    onChange(name) {
      this.active = name
      if (name ==1 ) {
        this.$router.push('/my')
      } else{
        this.$router.push('/index')
      }
    }
  }
}
</script>

<style scoped>
.tab-bar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}
.tab-icon {
  width: 44px;
  height: 44px;
}

/* 自定义Tabbar样式 */
::v-deep .van-tabbar-item {
  padding: 6px 0 10px;
}

::v-deep .van-tabbar-item__text {
  font-size: 12px;
  color: #666;
}

::v-deep .van-tabbar-item--active .van-tabbar-item__text {
  color: #1989fa;
}

::v-deep .van-tabbar-item__icon {
  font-size: 22px;
}
</style>
